<template>
  <div class="paper app-container">
    <List v-if="showList" @edit="handleEdit" @add="handleAdd" />
    <Form v-else :paper="paper" @cancel="handleCancel" @success="handleSuccess" />
  </div>
</template>

<script setup name="Paper">
import List from "./components/List";
import Form from "./components/Form";

const showList = ref(true);
const paper = ref(null);

function handleEdit(row) {
  console.log("🚀 ~ handleEdit ~ row:", row)
  showList.value = false;
  paper.value = row;
}

function handleAdd() {
  paper.value = null;
  showList.value = false;
}

function handleCancel() {
  paper.value = null;
  showList.value = true;
}

function handleSuccess() {
  handleCancel()
}
</script>

<style lang="scss" scoped>
.app-container{
  height: calc(100vh - 84px);
}
</style>
